<template>
    <!-- 登录页面element-plus Layout分栏间隔 居中显示 -->
    <el-row class="login-container" justify="center" align="middle">
        <!-- 卡片组件 card卡片 -->
        <el-card style="max-width: 480px">
            <!-- 头部插槽 -->
            <template #header>
                <!-- 卡片头部 -->
                <div class="card-header">
                    <img :src="imgUrl" alt="">
                </div>
            </template>
            <!-- 跳转链接 -->
            <div class="jump-link">
                <!-- Link 链接 -->
                <el-link type="primary" @click="handleClick">{{ formType ? '返回登录' : '注册账号' }}</el-link>
            </div>
            <!-- Form 表单 -->
            <!-- ref="ruleFormRef" 获取表单实例，以便调用表单方法(表单校验) -->
            <el-form :model="loginForm" label-width="auto" :rules="rules" ref="ruleFormRef">
                <!-- prop 属性 绑定表单数据 -->
                <el-form-item prop="userName">
                    <el-input v-model="loginForm.userName" placeholder="手机号" :prefix-icon="UserFilled"></el-input>
                </el-form-item>

                <el-form-item prop="passWord">
                    <el-input v-model="loginForm.passWord" placeholder="密码" type="password"
                        :prefix-icon="Lock"></el-input>
                </el-form-item>

                <el-form-item v-if="formType" prop="validCode">
                    <el-input v-model="loginForm.validCode" placeholder="验证码" :prefix-icon="Lock">
                        <!-- 验证码输入框后置内容 插槽  -->
                        <template #append>
                            <span style="cursor: pointer;" @click="getValidCode">{{ getValidCodeText.text }}</span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <!-- 表单提交 @click="submitForm(ruleFormRef)" 表单校验 element-plus -->
                    <el-button type="primary" :style="{ width: '100%' }" @click="submitForm(ruleFormRef)">
                        {{ formType ? '注册账号' : '登录' }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
</template>

<script setup name="Login">
// 引入element-plus图标
// 全局注册了所有 Element Plus 的图标组件，在模板里可以直接用 <UserFilled /> 这样的标签。
// 但: prefix - icon="UserFilled" 不是标签
// 你在 < el - input : prefix - icon="UserFilled" /> 里用的是变量，不是标签。
// : prefix - icon 需要传递一个组件对象，而不是字符串或标签名。
// 如果你在 < script setup > 里没有 import { UserFilled } ...，那么 UserFilled 变量是未定义的。
// 全局注册只是让你可以在模板里直接用 < UserFilled />，但不会自动在 < script setup > 里生成变量。
import { UserFilled, Lock } from '@element-plus/icons-vue'

// 引入menuStore
import { useMenuStore } from '@/stores/menu'
import { storeToRefs } from 'pinia'

// 使用menuStore
const menuStore = useMenuStore()
const { dynamicMenu } = menuStore
const { routerList } = storeToRefs(menuStore)

import { useRouter } from 'vue-router'
// 引入api
import { getCode, userAuthentication, login, menuPermissions } from '../../api'

import { ref, reactive, toRaw } from 'vue'
// 动态构建图片资源的 URL
// new URL('路径', import.meta.url)：这是利用了 JavaScript 的 URL 构造函数和 ES Module 的 import.meta.url 特性来定位文件路径。
// .href：获取该 URL 对象的完整路径字符串
const imgUrl = new URL('../../../public/login-head.png', import.meta.url).href

const router = useRouter()
// 表单ref 表单校验 element-plus
const ruleFormRef = ref(null)

// 表单数据
const loginForm = reactive({
    userName: '',
    passWord: '',
    validCode: ''
})

// 表单类型 0:登录 1:注册
const formType = ref(0)
const handleClick = () => {
    formType.value = formType.value ? 0 : 1
}

// 验证码显示文本
const getValidCodeText = reactive({
    text: '获取验证码',
    time: 60
})

// 获取验证码
let tiemId = null
const getValidCode = () => {
    // 如果倒计时还在，则不执行
    if (tiemId) return
    // 手机号正则
    const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    // Message 消息提示 element-plus
    if (!loginForm.userName || !phoneReg.test(loginForm.userName)) {
        return ElMessage({
            message: '请输入正确的手机号',
            type: 'warning',
        })
    }
    // 设置验证码倒计时
    getValidCodeText.text = `剩余${getValidCodeText.time}s`
    tiemId = setInterval(() => {
        if (getValidCodeText.time <= 0) {
            getValidCodeText.text = '获取验证码'
            getValidCodeText.time = 60
            // 清除定时器
            clearInterval(timerId);
            tiemId = null
        } else {
            getValidCodeText.time -= 1
            getValidCodeText.text = `剩余${getValidCodeText.time}s`
        }
    }, 1000)

    // 调用getCode网络请求获取验证码
    getCode({ tel: loginForm.userName }).then(({ data }) => {
        if (data.code === 10000) {
            ElMessage.success('发送成功')
        }
    })
}

// 验证用户名：手机号
const validateUser = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入手机号'))
    } else {
        const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
        phoneReg.test(value) ? callback() : callback(new Error('手机号格式不正确，请输入正确的手机号'))
    }
}

// 验证密码：4-16位字母数字下划线
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        const phoneReg = /^[a-zA-Z0-9_-]{4,16}$/
        phoneReg.test(value) ? callback() : callback(new Error('密码格式不正确，请输入正确的密码'))
    }
}

// 表单验证  trigger: 'blur' 失去焦点时触发
const rules = reactive({
    // 用户名
    userName: [{ validator: validateUser, trigger: 'blur' }],
    // 密码
    passWord: [{ validator: validatePass, trigger: 'blur' }],
})

// 表单提交 表单校验 element-plus
const submitForm = async (formEl) => {
    if (!formEl) return
    // 手动触发表单验证
    await formEl.validate((valid, fields) => {
        if (valid) {
            // 注册
            if (formType.value === 1) {
                // 调用注册用户网络请求
                userAuthentication(loginForm).then(({ data }) => {
                    if (data.code === 10000) {
                        ElMessage.success('注册成功')
                        // 跳转登录
                        formType.value = 0
                    } else {
                        ElMessage.error('注册失败', data.msg)
                    }
                })
            } else {
                // 登录
                // 调用登录网络请求
                login(loginForm).then(({ data }) => {
                    if (data.code === 10000) {
                        // 将token和用户信息存储到本地
                        localStorage.setItem('pz_token', data.data.token)
                        localStorage.setItem('pz_userInfo', JSON.stringify(data.data.userInfo))
                        // 获取菜单权限
                        menuPermissions().then(({ data }) => {
                            if (data.code === 10000) {
                                // 动态设置菜单
                                dynamicMenu(data.data)
                                // 动态的将路由列表添加到路由
                                toRaw(routerList.value).forEach(item => {
                                    router.addRoute('main', item)
                                })
                                // 显示登录成功提示并跳转首页
                                ElMessage.success('登录成功')
                                router.push('/')
                            } else {
                                ElMessage.error('获取菜单权限失败', data.msg)
                            }
                        })
                    } else {
                        ElMessage.error('登录失败', data.msg)
                    }
                })
            }
        }
    })
}
</script>

<style lang="less" scoped>
:deep(.el-card__header) {
    padding: 0
}

.login-container {
    height: 100%;

    .card-header {
        background-color: #899fe1;

        img {
            width: 430px;
        }
    }

    .jump-link {
        text-align: right;
        margin-bottom: 10px;
    }
}
</style>